/**
 * @description  明细图（VAR分析）
 * @author zht
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { SecondHeaderC, TableC } from '../../../../comps';

class Detailed extends PureComponent {
  constructor() {
    super();
    this.state = {
      oldDataSource: [], //无序dataSource
      dataSource: [],
      columns: [],
    };
  }

  componentDidMount() {
    const { formData } = this.props;
    if (formData) {
      this.getData(formData);
    }
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps.formData) !== JSON.stringify(this.props.formData)) {
      this.getData(nextProps.formData);
    }
  }
  //获取数据
  getData = (formData) => {
    this.props.dispatch({
      type: 'varAnalysisM/queryDetailed',
      payload: {
        ...formData,
      },
      callback: (data) => {
        if (data && data.dataSource.length && data.columns.length) {
          const cloneColumns = this.changeColumns(data.columns);
          this.setState({
            dataSource: data.dataSource,
            columns: cloneColumns,
            oldDataSource: data.dataSource,
          });
        } else {
          this.setState({
            dataSource: [],
            columns: [],
            oldDataSource: [],
          });
        }
      },
    });
  };
  // 表格排序
  changeSorter = (sorter) => {
    const { oldDataSource, dataSource } = this.state;
    const key = sorter.columnKey;
    const type = sorter.order;
    const compare = (key, type) => {
      if (type == 'descend') {
        return (obj1, obj2) => {
          // 升序
          var val1 = obj1[key];
          var val2 = obj2[key];
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        };
      } else if (type == 'ascend') {
        return (obj1, obj2) => {
          // 降序
          var val1 = obj1[key];
          var val2 = obj2[key];
          if (val1 < val2) {
            return 1;
          } else if (val1 > val2) {
            return -1;
          } else {
            return 0;
          }
        };
      } else if (type == undefined) {
        //  排序第三种状态恢复成默认状态
        dataSource.map((item) => {
          oldDataSource.map((oldItem) => {
            if (item.id == oldItem.id && item.children && item.children.length) {
              item.children = _.cloneDeep(oldItem.children);
            }
          });
        });
      }
    };

    if (dataSource.length) {
      dataSource.map((item) => {
        if (item.children && item.children.length) {
          const child = item.children; // 仅对子节点排序
          child.sort(compare(key, type));
        }
      });
    }
  };
  // 表格排序
  onTableChange = (pagination, filt, sorter) => {
    this.changeSorter(sorter);
  };
  // 处理表格样式展示
  changeColumns = (columns) => {
    const cloneColumns = columns.concat();
    if (cloneColumns && cloneColumns.length) {
      cloneColumns.map((value) => {
        if (value.key == 'MKTVAL' || value.key == 'VAR' || value.key == 'CVAR' || value.key == 'IVAR' || value.key == 'MVAR') {
          value.type = 'money';
          value.sorter = true;
          value.width = 180;
        }
        if (value.key == 'SECUTYPE') {
          value.width = 200;
        }
      });
    }
    return cloneColumns;
  };
  render() {
    const { dataSource, columns } = this.state;
    return (
      <div style={{ maxHeight: '500px', overflow: 'auto', marginBottom: '20px', width: '100%' }}>
        <SecondHeaderC title='明细图' />{' '}
        <TableC columns={columns} dataSource={dataSource} scroll={{ x: 'max-content' }} hidePage={true} onChange={this.onTableChange} rowKey='KEY' loading={this.props.loading} />
      </div>
    );
  }
}
export default connect(({ varAnalysisM, loading }) => ({
  varAnalysisM,
  loading: loading.effects['varAnalysisM/queryDetailed'],
}))(Detailed);
